<template>
	<footer class="footer">
		<span class="todo-count">剩余<strong>{{ leftCount }}</strong></span>
		<ul class="filters">
			<li>
				<a :class="{selected:type === 'all'}" href="javascript:;" @click="sel('all')">全部</a>
			</li>
			<li>
				<a :class="{selected:type === 'no'}" href="javascript:;" @click="sel('no')">未完成</a>
			</li>
			<li>
				<a :class="{selected:type === 'yes'}" href="javascript:;" @click="sel('yes')">已完成</a>
			</li>
		</ul>
		<button class="clear-completed" v-show="rightCount" @click="clearAsyncDone">清除已完成</button>
	</footer>
</template>

<script>
import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'
	export default {
		methods:{
			...mapMutations('todos',['sel']),
			...mapActions('todos',['clearAsyncDone'])
		},
		computed:{
			...mapState(['todos','list','type']),
			...mapGetters('todos',['leftCount','rightCount']),
			
		}

	}
</script>
